<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="19">
        <!-- 客户信息 -->
        <customerInformation v-model="form" state="detail" />

        <!-- 车辆信息 -->
        <carInformation v-model="form" state="detail" />

        <!-- 供应商信息 -->
        <supplierInformationDetail @updateView="updateView" ref="supplierInformationDetail" v-model="form" state="detail" />

        <!-- 自行收车信息 -->
        <selfCollecting ref="selfCollecting" v-model="form" state="detail" />

        <!-- 撤销收车信息 -->
        <revocation ref="revocation" v-model="form" state="detail" />
      </el-col>
      <el-col :span="5" style="margin-top: -20px">
        <FlowRecord v-if="form.flowId" :id="form.flowId.toString()" style="width: 100%" />
        <OperationRecordCop :logs="form.logs" style="margin-top: 20px" />
      </el-col>
    </el-row>
    <div style="text-align: right; box-sizing: border-box; padding-right: 20px; margin-top: 20px; background-color: #fff; width: 100%; height: 60px; line-height: 60px; border-radius: 8px">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import customerInformation from './components/customerInformation'
import carInformation from './components/carInformation'
import supplierInformationDetail from './components/supplierInformationDetail'
import selfCollecting from './components/selfCollecting'
import revocation from './components/revocation'
import OperationRecordCop from '@/views/contractTemplate/components/OperationRecordCop.vue'
import { backCarDetail } from '@/api/pickUpTheCar'
export default {
  // 委外收车详情
  name: 'PickUpTheCarDetail',
  components: {
    customerInformation,
    carInformation,
    supplierInformationDetail,
    selfCollecting,
    revocation,
    OperationRecordCop,
  },
  data() {
    return {
      loading: false,
      form: {},
    }
  },
  created() {
    this.backCarDetail()
  },
  methods: {
    updateView() {
      this.backCarDetail()
    },
    async backCarDetail() {
      this.loading = true
      try {
        let { data } = await backCarDetail(this.$route.query.id)
        this.loading = false
        this.form = data
      } catch (error) {
        this.loading = false
      }
    },
    back() {
      this.$tab.closeOpenPage(this.$route)
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto !important;
}
</style>
